<template>
	<view>
		<tab-bar style="width: 100%;" :tabBars="tabBar.tabBars" :tabIndex="tabBar.tabIndex" @tapTab="tapTab"></tab-bar>
	  <view class="title-text f-side">
			<view >2019-11-6</view>
			<view class="title-text-right flex">
				<view>消核：2张</view>
				<view>共计：￥10000</view>
			</view>
		</view>
		<view class="swiper-box">
			<scroll-view scroll-y class="scroll-view">
				<block v-for="(item,index) in 4" :key="index">
					<view class="info-card">
						<view class="card-head f-side">
							<view class="flex card-head-left">
								<view class="f-center">
									<image src="" mode=""></image>
								</view>
								<view class="car-info">
									<view>川a 12452</view>
									<view>4000 km</view>
								</view>
							</view>
						</view>
						<view class="f-side height-fixed"><view>券名：</view><view>300元消费</view></view>
						<view class="f-side height-fixed"><view>券编号：</view><view>333333</view></view>
						<view class="f-side height-fixed"><view>消核面额：</view><view>￥300</view></view>
						<view class="f-side height-fixed"><view>消核时间：</view><view>2019-11-6 00：00</view></view>
						<view class="f-side height-fixed"><view>消核人：</view><view>徐凯</view></view>
						<view class="flex describ zcRelative">
							<view>消核说明：</view>
							<view class="flex1">明消核说明消核说明消核说明消核说明</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	let _this;
	import tabBar from "../../components/tab-bar/tab-bar.vue"
	export default {
		components:{
			tabBar
		},
		data() {
			return {
					tabBar:{
					tabIndex:0,
					tabBars:[
						{name:'券名'},
						{name:'券码'},
						{name:'时间段'}
					]
				},				
			}
		},
		created(){
			_this = this;
		},
		methods: {
		 tapTab(e){
		   _this.tabBar.tabIndex = e
	   },		
		}
	}
</script>

<style>
	.zc-swiper-tab{border-radius: 0!important;margin-bottom: 0!important;border: none!important;box-shadow: 1upx 1upx 5upx 4upx #EAEDF1;}
	.swiper-tab-list{position: relative; color: #333;width: 33.3%!important;background-color: #FFFFFF;border: none!important;padding: 20upx 0!important;}
	.uni-tab-bar .active{color: #3CA4F9!important;background-color: #FFFFFF;position: relative;text-align: center;}
	.uni-tab-bar .active:after{border-color: #3CA4F9 transparent transparent; /*灰 透明 透明 */}
.swiper-tab-list:after{
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		border-width: 16upx 10upx 16upx;
		border-style: solid;
		border-color: #5d5d5d transparent transparent; /*灰 透明 透明 */
		right: 60upx;
		top: 38upx;
}
.swiper-tab-list:last-child:after{
	right: 52upx;
}
.title-text{
	height: 60upx;
	line-height: 60upx;
	padding: 0 20upx;
}
.title-text .title-text-right>view{
	margin-left: 30upx;
}
.swiper-box{
	 position: absolute;
	 top:130upx;
	 width: 100%;
	 bottom: 0;
 }
 .scroll-view{
	 height: 100%;
 }
 .swiper{
height: auto; 
}
.card-head-left image{
	width: 70upx;
	height: 70upx;
	margin:0 20upx 0 10upx;
	margin-top: 10upx;
	border-radius: 50%;
	border: 1upx solid #ccc;
}
.info-card{
	margin: 20upx 20upx;
	padding: 0 20upx 20upx 20upx;
	border-radius: 10upx;
	box-shadow: 1upx 1upx 5upx 4upx #EAEDF1;
	background-color: #fff;
}
.card-head{
	padding-bottom: 10upx;
	border-bottom: 1upx solid #F9F9F9;
}
.car-info>view:first-child{
	font-size: 32upx;
	font-weight: 530;
	height: 60upx;
	line-height: 75upx;
}
.car-info>view:last-child{
	height: 30upx;
	font-size: 26upx;
	line-height: 20upx;
}
.describ>view:first-child{
	flex:0 0 150upx;
	height: 45upx;
	line-height: 45upx;
}
.describ>view:last-child{
	line-height: 40upx;
	text-align: right;
}
.height-fixed{
	height: 45upx;
	line-height: 45upx;
}
</style>
